<template>
	<div>
		<headerVue :HeadIndex="3"></headerVue>
		<div class="img">
			<img src="../../assets/imgs/bge.jpg" alt="" srcset="" />
		</div>

		<div class="nav">
			<div class="w1400">
				<div class="ul">
					<div class="list active">
						所有
					</div>
					<div class="list">
						办公
					</div>
					<div class="list">
						教育
					</div>
					<div class="list">
						餐饮
					</div>
					<div class="list">
						会所
					</div>
					<div class="list">
						酒店
					</div>
					<div class="list">
						商业
					</div>
				</div>
			</div>

		</div>


		<div class="w1400">
			<div class="box">
				<RecommendContent></RecommendContent>
			</div>
		</div>


		<!-- 底部 -->
		<footerVue></footerVue>
	</div>
</template>

<script setup>
	import headerVue from '../../components/header.vue';
	import footerVue from '../../components/footer.vue';
	import RecommendContent from "./RecommendContent.vue";
</script>

<style scoped lang="less">
	.nav {
		background: #333333;
		padding: 50px;
	}

	.img {
		width: 100%;
		overflow: hidden;

		img {
			vertical-align: bottom;

		}
	}

	.w1400 {
		width: 1400px;
		margin: 0 auto;

		.ul {
			display: flex;
			justify-content: center;

			.list {
				position: relative;
				font-size: 13px;
				font-weight: 500;
				color: #888;
				margin-right: 20px;
				padding: 9px 23px;
				border-radius: 30px;
				border: 1px solid #dedede;
				background: transparent;
				cursor: pointer;
				transition: all 0.3s;

				&:hover {
					color: #da1a45;
					border: 1px solid #da1a45 !important;
				}
			}

			.active {
				color: #fff !important;
				;
				cursor: pointer;
				background: #da1a45;
				border-color: #da1a45;
			}

		}

		.box {
			margin-top: 50px;
		}
	}
</style>